<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
<script>
  function f1(){
    //   获取页面元素
    let btn=document.getElementById("btn1");
    //取值
    // 语法 HTML对象.getAttribute("属性名")
    console.log(("type属性:"+btn.getAttribute("type")))
    console.log("value属性:"+btn.getAttribute("value"))
    console.log("id属性:"+btn.getAttribute("id"))
    console.log("a的属性:"+btn.getAttribute("a"))
    console.log("onclick的属性:"+btn.getAttribute("onclick"))

    //赋值
    btn.setAttribute("value","这是更改后访问的HTML属性")

  }
  function f2(){
    // 自定义属性a在DOM不存在无法访问
    // 语法 DOM对象.属性名
    let btn=document.getElementById("btn2");
    console.log("type属性:"+btn.type)
    console.log("value属性:"+btn.value)
    console.log("id属性"+btn.id)
    console.log("a属性"+btn.a)
    console.log("onclick属性:"+btn.onclick)
    //赋值
    btn.value="这是更改后的访问DOM属性"
  }
</script>
</head>
<body>
<input type="button" value="访问HTML属性" id="btn1" a="b" onclick="f1()"><br>
<input type="button" value="访问DOM属性" id="btn2" a="bb" onclick="f2()">
</body>
</html>